<template>
	<el-dialog title="手续费率和手续费金额" :visible.sync="dialogVisible" width="1000px">
		<el-table :data="tableData" border>
			<el-table-column type="expand">
				<template slot-scope="props">
					<div class="flex flex-wrap detail">
						<p class="detail_item">
							<label>平台手续费：</label>
							￥{{props.row.platform_amount}}（{{props.row.platform_rate}}%）
						</p>
						<p class="detail_item">
							<label>实名认证：</label>
							￥{{props.row.realname_amount||'0.00'}}
						</p>
						<p class="detail_item">
							<label>合同：</label>
							￥{{props.row.contract_amount||'0.00'}}
						</p>
						<p class="detail_item">
							<label>风控：</label>
							￥{{props.row.risk_amount||'0.00'}}
						</p>
						<p class="detail_item">
							<label>保险：</label>
							￥{{props.row.insurance_amount}}（{{props.row.insurance_rate}}%）
						</p>
						<p class="detail_item">
							<label>融资总租金：</label>
							￥{{props.row.financing_amount}}（{{props.row.financing_rate}}%）
						</p>
						<p class="detail_item">
							<label>存证：</label>
							￥{{props.row.file_amount}}（{{props.row.file_rate}}%）
						</p>
						<p class="detail_item">
							<label>代扣手续费：</label>
							￥{{props.row.withhold_amount}}（{{props.row.withhold_rate}}%）
						</p>
						<p class="detail_item">
							<label>花呗：</label>
							￥{{props.row.huabei_fee||'0.00'}}
						</p>
					</div>
				</template>
			</el-table-column>
			<el-table-column align="center" label="订单编号">
				<span>{{viewItem.trade_no}}</span>
			</el-table-column>
			<el-table-column align="center" label="租金" prop="rent">
			</el-table-column>
			<el-table-column align="center" label="手续费率">
				<span>{{feeRate}}</span>
			</el-table-column>
			<el-table-column align="center" label="手续费金额">
				<span>{{viewItem.service_fee}}</span>
			</el-table-column>
			<el-table-column align="center" prop="trade_no" label="交易流水号">
			</el-table-column>
			<el-table-column align="center" label="店铺名称">
				{{viewItem.shopname}}
			</el-table-column>
		</el-table>
		<div slot="footer" class="dialog-footer">
			<el-button type="primary" @click="dialogVisible=false">关闭</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import {
		getFeeDetails
	} from "@/api/finance";
	export default {
		props: ['viewItem'],
		data() {
			return {
				dialogVisible: false,
				tableData: [],
				feeRate: ''
			};
		},
		methods: {},
		watch: {
			dialogVisible(val) {
				if (val) {
					const {
						order_id,
						trans_id
					} = this.viewItem;
					getFeeDetails({
						orderId: order_id,
						transId: trans_id
					}).then(res => {
						this.tableData = [{
							...res
						}] || [];
						// let risk_amount = res.risk_amount || 0;
						// let contract_amount = res.contract_amount || 0;
						// let realname_amount = res.realname_amount || 0;
						// const fee = (parseFloat(risk_amount) + parseFloat(contract_amount) + parseFloat(realname_amount)).toFixed(2);
						// const rateTotal = (res.file_rate ? parseFloat(res.file_rate) : 0) +
						//   (res.financing_rate ? parseFloat(res.financing_rate) : 0) +
						//   (res.insurance_rate ? parseFloat(res.insurance_rate) : 0) +
						//   (res.platform_rate ? parseFloat(res.platform_rate) : 0) +
						//   (res.withhold_rate ? parseFloat(res.withhold_rate) : 0);
						this.feeRate = res.order_fixed_cost + '+' + res.order_rate + '%';
					})
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.detail {
		padding: 15px 70px 5px;
		background-color: #f8f8f8;
	}

	.detail_item {
		width: 33%;
		color: #999999;
		margin-bottom: 10px;

		label {
			color: #748cad;
			width: 100px;
			display: inline-block;
		}
	}

	/deep/.el-table__expanded-cell {
		padding: 0;
	}
</style>